<template>
  <div style="padding: 2px 20px;background-color: #fff;width: 99%;margin: 5px auto 0px">
    <DynamicForm
      :labelWidth="85"
      style="margin-top: 20px;"
      :searchloading="loading"
      :items="items"
      :model="formModel"
      @update:model="update"
      @onFinish="submit"
    >
    </DynamicForm>
    <div style="margin-top: 20px;">
      <ElTableWithColumns
        :operateColProps="{ width: 170 }"
        @onChange="onChange"
        :loading="loading"
        :data="tableData"
        :columns="columns"
        :pagerInfo="pagerInfo"
      >
        <template #operate="{row}">
          <el-space>
            <el-button type="primary" plain size="small" @click="() => viewDetail(row)">详情</el-button>
            <el-button color="#52C41A" size="small" plain type="danger">子项目交付审核</el-button>
          </el-space>
        </template>
      </ElTableWithColumns>
    </div>
  </div>
</template>

<script lang="ts" setup>
import DynamicForm from '@/components/DynamicForm/index.vue';
import { getTaskList } from '@/api/projectMgt/index';
import { to } from 'await-to-js';
import { HttpStatus } from '@/enums/RespEnum';
import { taskStatusOptions, taskTypeOptions, businessTypeOptions } from '../../project/projectList/utils.ts'


const pagerInfo = reactive({
  pageSize: 10,
  total: 0,
  pageNum: 1
})

const router = useRouter()
const loading = ref(false)

const tableData = ref([])

const viewDetail = row => {
  router.push (`/project/projectDetail?id=${row.id}`)
}

const columns = [
  {
    title: '创建时间',
    dataIndex: 'auditTime',
    renderText: (row) => `<span>${row.auditTime}</span>`,
    width: 160
  },
  {
    title: '企业名称',
    dataIndex: 'merchantName',
    width: 220
  },
  {
    title: '服务商名称',
    dataIndex: 'providerName',
    width: 220
  },
  {
    title: '项目编号',
    dataIndex: 'taskCode',
    width: 140
  },
  {
    title: '项目标题',
    dataIndex: 'title',
    width: 150
  },
  {
    title: '服务金额（元）',
    dataIndex: 'taskCode',
    renderText: (row) => {
      return `${row.feeMin} ~ ${row.feeMax}`
    },
    width: 120
  },
  {
    title: '接单类型',
    dataIndex: 'taskType',
    width: 120,
    renderText: (row) => {
      return row.taskType === 1 ? '派单' : '接单'
    },
  },
  {
    title: '业务类型',
    dataIndex: 'taskCode',
    width: 160,
  },
  {
    title: '项目状态',
    dataIndex: 'taskCode',
    width: 160,

  },
  {
    title: '上架状态',
    dataIndex: 'taskCode',
    width: 160,
  },
]
const formModel = ref({})

const update = value => {
  console.log('update', value);

  formModel.value = value
}



const items = computed(() => {
  return [
    { prop: 'createTime', label: '创建时间', valueType: 'date', fieldProps: { type: 'daterange' } },
    { prop: 'taskCode', label: '项目编号', valueType: 'input' },
    { prop: 'title', label: '项目标题', valueType: 'input' },
    { prop: 'taskStatus', label: '项目状态', valueType: 'select', options: taskStatusOptions },
    { prop: 'taskType', label: '接单类型', valueType: 'select', options: taskTypeOptions },
  ]
})



const query = async (formData = {}) => {
  loading.value = true
  const [err, res] = await to(getTaskList({
    ...formData,
    ...pagerInfo
  }))
  loading.value = false
  if (err) {
    ElMessage.error('获取列表失败')
  } else {
    const { code } = res
    if (code === HttpStatus.SUCCESS) {
      tableData.value = res?.result?.records
      pagerInfo.total = res.result?.total
    }
  }
}


const onChange = ({data, type}) => {
  if (type === 'pageNo') {
    pagerInfo.pageNum = data
  }
  if (type === 'pageSize') {
    pagerInfo.pageSize = data
  }
  query()
}

const submit = data => {
  query(data)
}

onMounted(() => {
  query()
})
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
